import { Breadcrumb, Button, Divider, Flex, Form, Input, Radio, Select, Space, Spin } from 'antd'
import styled from 'styled-components'
import { Link } from 'react-router-dom'
import { MinusCircleOutlined } from '@ant-design/icons'
import { useParams } from '@/router/hooks'
import { useEffect, useState } from 'react'
import { getServiceCatalogDetail } from '@/api/sharing/serviceCatalog'
const FormParamsLit = ({ value = [], onChange }) => {
  const onInput = (index, key, val) => {
    onChange(value.map((item, i) => (i === index ? { ...item, [key]: val } : item)))
  }
  return (
    <StyleFormParamsLit>
      <table>
        <thead>
          <tr>
            <th>参数名</th>
            <th>参数值</th>
            <th className="action">操作</th>
          </tr>
        </thead>
        <tbody>
          {value.map((item, index) => (
            <tr key={index}>
              <td>
                <input placeholder="请输入参数名" value={item.key} onChange={(e) => onInput(index, 'key', e.target.value)} />
              </td>
              <td>
                <input placeholder="请输入参数值" value={item.value} onChange={(e) => onInput(index, 'value', e.target.value)} />
              </td>
              <td className="action">
                <Button shape="circle" type="text" danger onClick={() => onChange(value.filter((_, i) => i !== index))}>
                  <MinusCircleOutlined />
                </Button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <Button size="small" type="primary" onClick={() => onChange([...value, { key: '', value: '' }])}>
        添加参数
      </Button>
    </StyleFormParamsLit>
  )
}

const FormRequestBody = ({ value, onChange }) => {
  return (
    <StyleFormRequestBody>
      <div className="radio-group">
        <Radio.Group
          value={value}
          onChange={onChange}
          options={[
            { label: 'form-data', value: '1' },
            { label: 'x-www-form-urlencoded', value: '2' },
            { label: 'raw', value: '3' },
          ]}
        />
      </div>

      <table>
        <thead>
          <tr>
            <th>KEY</th>
            <th>VALUE</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </StyleFormRequestBody>
  )
}

const ServiceCatalogTryout = () => {
  const [form] = Form.useForm()
  const routeParams = useParams()
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    setLoading(true)
    getServiceCatalogDetail(routeParams.id)
      .then((response) => {
        form.setFieldsValue({
          requestProtocol: response.data.apiRequestVo.requestProtocol,
          method: response.data.apiRequestVo.method,
          serviceAddress: response.data.apiBacServiceVo.serviceAddress,
          autoRoute: response.data?.apiRequestVo.autoRoute,
          uri: response.data.uri,
          id: response.data.id,
        })
      })
      .finally(() => {
        setLoading(false) // 请求完成后关闭 loading
      })
  }, [])

  /* 发送情趣 */
  const sendForm = () => {
    console.log('form', form.getFieldsValue())
  }
  return (
    <StyleWrap>
      <Spin spinning={loading} tip="Loading...">
        <div className="page-breadcrumb">
          <Breadcrumb
            items={[
              {
                title: <Link to="/integration/sharing/serviceCatalog">服务目录</Link>,
              },
              {
                title: 'API测试',
              },
            ]}
          />
        </div>
        <div className="header-bar">
          <span className="title">基本参数配置</span>
          <span className="title">服务测试</span>
          <span className="header-bar-time">
            请求耗时：<span>50 ms</span>
          </span>
        </div>
        <div className="content-wrapper">
          <div className="left-box">
            <Form form={form} labelAlign="right" labelCol={{ span: 5 }}>
              <Form.Item name="requestProtocol" label="请求协议">
                <Select
                  disabled={true}
                  placeholder="请选择协议"
                  options={[
                    { label: 'HTTP', value: 0 },
                    { label: 'HTTPS', value: 1 },
                  ]}
                />
              </Form.Item>
              <Form.Item name="method" label="请求方法">
                <Select
                  disabled={true}
                  placeholder="请选择方法"
                  options={[
                    { label: 'GET', value: 'GET' },
                    { label: 'POST', value: 'POST' },
                    { label: 'DELETE', value: 'DELETE' },
                    { label: 'PUT', value: 'PUT' },
                    { label: 'PATCH', value: 'PATCH' },
                    { label: 'HEAD', value: 'HEAD' },
                    { label: 'OPTIONS', value: 'OPTIONS' },
                    { label: 'ANY', value: 'ANY' },
                  ]}
                />
              </Form.Item>
              <Form.Item name="serviceAddress" label="服务地址">
                <Input placeholder="请输入地址" />
              </Form.Item>
              <Form.Item name="autoRoute" label="权限key">
                <Input placeholder="请输入权限key" />
              </Form.Item>
              <Form.Item name="uri" label="路径">
                <Input placeholder="请输入路径" />
              </Form.Item>
              <Form.Item name="path" label="路径参数">
                <FormParamsLit />
              </Form.Item>
              <Form.Item name="query" label="查询参数">
                <FormParamsLit />
              </Form.Item>
              <Form.Item name="requestHeader" label="请求头">
                <FormRequestBody />
              </Form.Item>
            </Form>
            <Flex justify={'center'}>
              <Space size="large">
                <Button type="primary" onClick={sendForm}>
                  发送请求
                </Button>
                <Link to={`/integration/sharing/serviceCatalog/${routeParams.id}/edit`}>
                  <Button>前往编辑</Button>
                </Link>
              </Space>
            </Flex>
          </div>
          <Divider type="vertical" />
          <div className="right-box">
            <div className="preview-title">请求</div>
            <pre className="preview-content">
              GET /api/echo HTTP/1.1
              <br />
              Host: eb65c2f1607641c885d2458a00f8d8fb.apig.cn-east-3.huaweicloudapis.com
              <br />
              User-Agent: APIGatewayDebugClient/1.0
              <br />
              X-Apig-Mode: debug
            </pre>

            <div className="preview-title">响应</div>
            <pre className="preview-content">
              HTTP/1.1 302 Found
              <br />
              Content-Length: 154
              <br />
              Bdpagetype: 3<br />
              Connection: keep-alive
              <br />
              Content-Type: text/html
              <br />
              Date: Fri, 31 Jul 2020 02:46:23 GMT
              <br />
              Location: https://www.baidu.com/search/error.html
              <br />
              Server: api-gateway
              <br />
              Set-Cookie: BDSVRTM=0; path=/
              <br />
              Traceid: 159616358303219420268393300170453886025
            </pre>
          </div>
        </div>
      </Spin>
    </StyleWrap>
  )
}

const StyleWrap = styled.div`
  padding: 16px;
  .header-bar {
    display: flex;
    align-items: center;
    border: 1px solid #326394;
    border-radius: 2px;
    line-height: 50px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    .title {
      width: 50%;
      flex-shrink: 0;
    }
    .title:first-child {
      padding-left: 16px;
    }
  }

  .header-bar-time {
    position: absolute;
    right: 16px;
  }

  .content-wrapper {
    display: flex;
    margin-top: 30px;
    & > .ant-divider-vertical {
      height: unset;
    }
  }

  .left-box {
    flex: 1;
  }
  .right-box {
    flex: 1;
  }

  .preview-content {
    border: 1px solid rgba(116, 186, 251, 0.43);
    background-color: rgba(255, 255, 255, 0.04);
    height: 290px;
    overflow: auto;
    border-radius: 2px;
    margin-top: 10px;
    margin-bottom: 30px;
    padding: 10px;
    white-space: pre-wrap;
  }
  .preview-title {
    font-weight: bold;
  }
`

const StyleFormParamsLit = styled.div`
  table {
    width: 100%;
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 10px;
  }
  td,
  th {
    border: 1px solid #326394;
    height: 32px;
    padding: 0;
  }
  tbody {
  }
  input {
    border: none;
    background-color: unset;
    outline: none;
    width: 100%;
    height: 100%;
    padding: 0 10px;
  }
  .action {
    width: 50px;
    text-align: center;
  }
`

const StyleFormRequestBody = styled.div`
  table {
    width: 100%;
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px;
    margin-top: 10px;
  }
  td,
  th {
    border: 1px solid #326394;
    height: 32px;
    padding: 0;
  }
  tbody {
  }
  .radio-group {
    line-height: 32px;
  }
`
export default ServiceCatalogTryout
